<template>
  <div>
    <Card shadow>
      <Table :columns="columns" :data="tableData">
        <template slot-scope="{ row }" slot="status">
          <div class="statusBox">
            <template v-if="row.status == 1">
              <span class="failStatusIcon mr15"></span>
              <span>成功</span>
            </template>
            <template v-if="row.status == 2">
              <span class="successStatusIcon mr15"></span>
              <span>失败</span>
            </template>
            <template v-if="row.status == 3">
              <span class="statusThree mr15"></span>
              <span>导出中</span>
            </template>
            <!-- <span
              :class="row.status == 1 ? 'failStatusIcon' : 'successStatusIcon'"
            ></span>
            <span style="margin-left:10px">{{
              row.status == 1 ? "成功" : "失败"
            }}</span> -->
          </div>
        </template>
      </Table>
      <div class="page-foot">
        <Page :total="total" transfer show-total @on-change="changePage"></Page>
      </div>
    </Card>
  </div>
</template>

<script>
import { exportLogList } from "../../../api/setting";
export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
      columns: [
        {
          title: "记录ID",
          key: "id",
          minWidth: 80,
        },
        {
          title: "操作人",
          key: "handle",
          minWidth: 100,
        },
        {
          title: "开始时间",
          key: "handle_start_time",
          minWidth: 150,
        },
        {
          title: "结束时间",
          key: "handle_end_time",
          minWidth: 150,
        },
        {
          title: "状态",
          // key: "status",
          slot: "status",
          minWidth: 100,
        },
        {
          title: "模块",
          key: "module_name",
          minWidth: 100,
        },
        {
          title: "已处理记录",
          key: "success_num",
          minWidth: 100,
        },
        // {
        //   title: "已失败记录",
        //   key: "failed_num",
        //   minWidth: 100,
        // },
        {
          title: "操作",
          key: "down_link",
          fixed: "right",
          minWidth: 100,
          render(h, data) {
            if (data.row.status == "1") {
              return h(
                "a",
                {
                  attrs: {
                    href: data.row.down_link,
                    download: "xlsx",
                  },
                },
                "下载"
              );
            } else {
              return "";
            }
          },
        },
      ],
      tableData: [],
    };
  },
  created() {
    this._exportLogList(this.params);
  },
  methods: {
    //初始化数据
    _exportLogList(params) {
      exportLogList(params).then((res) => {
        this.total = res.total;
        this.tableData = res.list;
      });
    },
    //切换页码
    changePage(page) {
      this.params.page = page;
      this._exportLogList(this.params);
    },
  },
};
</script>

<style scoped lang="less">
.mr15 {
  margin-right: 10px;
}
.page-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}
.statusBox {
  display: flex;
  align-items: center;
}
.successStatusIcon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background-color: #ed4014;
}
.failStatusIcon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background-color: #19be6b;
}
.statusThree {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background-color: rgba(181, 181, 56, 0.685)
}
</style>
